<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title>NVR主页</title>
  <script th:src="@{~/flv.min.js}" type="text/javascript"></script>
  <script th:src="@{~/jquery.js}" type="text/javascript"></script>
  <script type="text/javascript">
    window.onload = function () {
      $('#video').toggle();
    }

    let flvPlayer = [];

    let url = ['http://127.0.0.1:8082/live?port=9999&app=myapp&stream=mystream',
      'http://127.0.0.1:8082/live?port=9999&app=myapp2&stream=mystream',
      'http://127.0.0.1:8082/live?port=9999&app=myapp3&stream=mystream',
      'http://127.0.0.1:8082/live?port=9999&app=myapp4&stream=mystream'];

    function openAllCam() {
      $("#video").append($("<h2>监控视频</h2>"));
      for (let i = 0; i < [[${num}]]; i++) {
        addPlayer(i);
        openCamera(i);
      }
    }

    function stopAllCam() {
      $("#video").empty();
      stopCamera();
    }

    function openCamera(i) {
      $("#message").text("正在开启...");
      console.log(i + "准备拉流" + url[i])
      $.post({
        url: "/startUpStreaming",
        data: {
          i: i
        },
        success: function (res) {
          if (res.result.status === 'success') {
            $("#message").text("开启完成");
            console.log("视频路数" + res.result.info);
            $("#video").show();
            if (flvjs.isSupported()) {
              // let player = flvPlayer[i];
              // if (player == null) {
              let player = flvjs.createPlayer({
                type: 'flv',
                isLive: true, // 如果是直播流需要设置这个值为 true
                // 奇怪的是，头一个就会被浏览器同源策略拦截，而后一个写死了就不会
                // url: res.result.info
                url: url[i]
              });
              player.attachMediaElement(document.getElementById("video" + i));
              flvPlayer.push(player);
              // }
              player.load();
              player.play();
            }
          } else {
            $("#message").text("开启失败" + res.result.info);
          }
        }
      })
    }

    function addPlayer(num) {
      let div = $("<div>");
      let span = $("<h3>");
      span.html("视频" + num);
      let video = $("<video class='centeredVideo' controls autoplay width='1024' height='576'>");
      video.attr('id', 'video' + num);
      div.append(span);
      div.append(video);
      $("#video").append(div);
    }

    function stopCamera() {
      $("#message").text("正在关闭...");
      console.log("全部关闭：" + flvPlayer);
      flvPlayer.forEach(function (item) {
        item.unload();
        item.destroy();
      })
      flvPlayer = [];
      $.post({
        url: "/stopStreaming",
        success: function (res) {
          if (res.result.status === 'success') {
            $("#message").text("已关闭");
          } else {
            $("#message").text("失败" + res.result.info);
          }
          $("#video").toggle();
        }
      })
    }

    function register() {
      let img = document.getElementById('canvas').toDataURL();
      let base64 = img.substring(img.indexOf(",") - 1, img.length);
      $.ajax({
        url: "/storeFace",    //请求的url地址
        dataType: "json",   //返回格式为json
        async: true,//请求是否异步，默认为异步，这也是ajax重要特性
        // contentType:"application/json",
        data: {
          "image": base64,
          "user_id": $("#name").val(),
          "group_id": $("#groupId").val()
        }, //参数值
        type: "POST", //请求方式
        success: function (data) {
          console.log(data);
        }
      })
    }

  </script>
</head>
<body>
<h1>NVR控制中心</h1>

<div>
  <h2>本NVR硬件基本信息</h2>
  <table>
    <tr>
      <td>类别</td>
      <td th:text="${info.getCategory()}"></td>
    </tr>
    <tr>
      <td>名称</td>
      <td th:text="${info.getName()}"></td>
    </tr>
    <tr>
      <td>描述</td>
      <td th:text="${info.getDescription()}"></td>
    </tr>
    <tr>
      <td>位置</td>
      <td th:text="${info.getLocation()}"></td>
    </tr>
    <tr>
      <td>url</td>
      <td th:text="${info.getUrl()}"></td>
    </tr>
    <tr>
      <td>软件版本</td>
      <td th:text="${info.getVersion()}"></td>
    </tr>
  </table>
</div>

<h2>控制面板</h2>
<div>
  <h3>监控开关</h3>
  <span th:text="'检测到摄像头共'+${numr}+'个，只支持最多4路视频输出'"></span>
  <button id="startLive" type="submit" onclick="openAllCam()">开启摄像头推流</button>
  <button id="endLive" type="submit" onclick="stopAllCam()">关闭摄像头推流</button>
  <div id="message"></div>

  <h3>视频存储</h3>

  <h3>人脸注册</h3>
  <label for="name" th:text="请输入姓名"></label><input type="text" id="name">
  <label for="groupId" th:text="请输入组号"></label><input type="text" id="groupId">
  <button id="register" type="submit" onclick="register()">注册</button>

  <h3>事件记录</h3>
</div>

<div id="video">
  <!--  <h2>监控视频</h2>-->
  <!--  <div>-->
  <!--    <h3>视频1</h3>-->
  <!--    <div class="mainContainer">-->
  <!--      <video id="video1" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old-->
  <!--        to support HTML5 video.-->
  <!--      </video>-->
  <!--      <canvas id="canvas" width="1024" height="576" style="display: none;"></canvas>-->
  <!--    </div>-->
  <!--  </div>-->


</div>
<div>
  <h2>说明</h2>
  <span>此网页仅为示例，对于不同硬件的上位机，需要分别开发适配</span>
</div>
</body>
</html>
